<template>
  <div class="vant-table"> 
    <table cellspacing="0"  style="width:100%" class="table">
      <tr :class="'title'+'  '+thclass">
        <th class="th"  v-for="(item, index) in option.column" :key="index">{{ item.label }}</th>
      </tr>
      <div class = 'topbox'></div>
        <tr v-for="(item, index) in tableData" :key="index" class="list-tr" @click="send(item)">
        <td v-for="(context, i) in option.column" :key="i" >{{ item[context.prop] }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
   props:{
      tableData:Array,
      option:Object,
      thclass:{
        type:String,
        default:""
      }
   },
   data(){
     return{
       show: false,
  //      tableData: [
  //       {
  //         closedAccount: 0,
  //         givePrice: 0,
  //         noAccount: 0,
  //         roomType: "B卡座",
  //         totalPrice: 0
  //       },
  //       {
  //         closedAccount: 0,
  //         givePrice: 0,
  //         noAccount: 0,
  //         roomType: "BO卡座",
  //         totalPrice: 0
  //       },
  //       {
  //         closedAccount: 0,
  //         givePrice: 0,
  //         noAccount: 0,
  //         roomType: "BOS卡座",
  //         totalPrice: 0
  //       },
  //       {
  //         closedAccount: 0,
  //         givePrice: 0,
  //         noAccount: 0,
  //         roomType: "BOSS卡座",
  //         totalPrice: 0
  //       },
  //     ],
	// //th
	// option: {
  //       column: [
  //         {
  //           label: '房台类型',
  //           prop: 'roomType'
  //         },
  //         {
  //           label: '已结',
  //           prop: 'closedAccount'
  //         },
  //         {
  //           label: '未收款',
  //           prop: 'noAccount'
  //         },
  //         {
  //           label: '赠送',
  //           prop: 'givePrice'
  //         },
  //         {
  //           label: '合计',
  //           prop: 'totalPrice'
  //         }
  //       ]
  //     },
     }
   },
   methods:{
     send(item){
       if(item.city.length === 0 ) return
       this.$emit('sendData',item)
     },
   }
};
</script>

<style lang="less" scoped>
.vant-table {
  margin: 10px;
  background-color: rgb(245, 245, 245);
  .table {
     border-radius: .185185rem;
     font-size: 14px;
     text-align: center;
  }
     .title{
       width:100%;
       max-width: 750px;
       box-sizing: border-box;
     }
    .th {
      flex:1;
      height: 1.074074rem;
      line-height: 1.074074rem;
      font-size: 14px;
      background-color: #bde5ff;
      text-align: center;
      border-left: 1px solid #fff;
    }
    .list-tr {
      height: 0.7rem;
      line-height: 0.7rem;
    }
    .list-tr:nth-child(2n) {
      background-color: #fff8e1;
    }
    .fixedtop{
      position:fixed;
      top:0;
      display:flex;
      padding-right: 20px;
    }
    .fixedtop + div{
      height: 1.074074rem;
    }
}
</style>
